<template>
  <div>
    <!--
    买入批次<el-date-picker
          style="width: 120px; margin-right:30px; margin-left:10px"
            v-model="searchData.buy_num.value"
            value-format="YYYY-MM"
            type="month"
            placeholder="买入批次"
            :default-value="new Date(2024, 1, 1)"
          />
      </div>

        母牛品种<el-select v-model="searchData.sort.value" placeholder="母牛品种" style="width: 120px; margin-right:30px; margin-left:10px">
          <el-option label="西门塔尔牛" value="西门塔尔牛"/>
          <el-option label="鲁西黄牛" value="鲁西黄牛"/>
          <el-option label="夏洛莱牛" value="夏洛莱牛"/>
        </el-select>
     -->
    <div class="search-line">

      项目<el-select v-model="searchData.projId.value" placeholder="项目" style="width: 120px; margin-right:30px; margin-left:10px">
        <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projName"
              :value="item.id"

            />
      </el-select>

      <!-- 项目名
      <el-input v-model="searchData.projName.value" style="width: 80px; margin-right:30px; margin-left:10px"/> -->
      合同标题
      <el-input v-model="searchData.title.value" style="width: 80px; margin-right:30px; margin-left:10px"/>

      上传人
      <el-select v-model="searchData.userId.value" placeholder="用户"   style="width: 220px; margin-right:30px; margin-left:10px">
        <el-option
          v-for="item in userList"
          :key="item.id"
          :label="item.userName +'---'+item.departName +'---'+item.departRole"
          :value="item.id"

        />
        </el-select>


      <el-button type="primary" @click="loadData()">查询</el-button>
      <el-button type="warning" @click="clearnSearch()">重置</el-button>
<!--      <el-button type="success" @click="addDialog = true">添加</el-button>-->
    </div>

    <div class="border w-full">
      <el-table :data="tableData.records">
        <!---------------------表单数据------------------------------->


        <el-table-column prop="project.projName" label="项目名" width="100"/>
        <el-table-column prop="title" label="合同标题" width="100"/>
        <el-table-column prop="depart.name" label="上传部门" width="100"/>
        <el-table-column prop="user.userName" label="上传人" width="100"/>
        <el-table-column prop="fileCount" label="文件个数" width="100"/>
        <el-table-column prop="createTime" label="创建时间" width="240"/>
        <!---------------------表单数据------------------------------->
        <el-table-column label="操作">
          <template #default="scope">
<!--            <el-button size="small" @click="selectFile(scope.row.id)">上传文件</el-button>-->
            <el-button size="small" @click="openDetail(scope.row.id)">详情</el-button>
<!--            <el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>-->
<!--            <el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>-->
            <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        style="margin-bottom: 20px"
        background
        layout="prev, pager, next"
        :page-count="tableData.pages"
        v-model:current-page="tableData.page"
        @update:current-page="loadData"
    />

    <!------------------文件上传弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="detailDialog"
        title="文件上传"
        width="30%"
        :before-close="resetForm"
    >
<!--      <div>-->
<!--        <el-upload-->
<!--  class="upload-demo"-->
<!--  drag-->
<!--  action="https://jsonplaceholder.typicode.com/posts/"-->
<!--  multiple>-->
<!--  <i class="el-icon-upload"></i>-->
<!--  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--  -->
<!--</el-upload>-->
<!--      </div>-->
      <el-button @click="resetForm">关闭</el-button>
    </el-dialog>

    <!------------------新增弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="addDialog"
        title="新增"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目">
          <el-select v-model="form.projId" placeholder="项目" style="width: 120px; margin-right:30px; margin-left:10px">
            <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.projName"
                  :value="item.id"

                />
          </el-select>
        </el-form-item>

        <el-form-item label="合同标题">
          <el-input v-model="form.title"/>
        </el-form-item>

        <el-form-item label="上传人
">
<el-select v-model="form.userId" placeholder="用户"   style="width: 220px; margin-right:30px; margin-left:10px">
  <el-option
    v-for="item in userList"
    :key="item.id"
    :label="item.userName +'---'+item.departName +'---'+item.departRole"
    :value="item.id"

  />
  </el-select>

        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime" disabled/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!------------------编辑弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="editDialog"
        title="编辑"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目">
          <el-select v-model="form.projId" placeholder="项目" style="width: 120px; margin-right:30px; margin-left:10px">
            <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.projName"
                  :value="item.id"

                />
          </el-select>
        </el-form-item>

        <el-form-item label="合同标题">
          <el-input v-model="form.title"/>
        </el-form-item>

        <el-form-item label="上传人
">
<el-select v-model="form.userId" placeholder="用户"   style="width: 220px; margin-right:30px; margin-left:10px">
  <el-option
    v-for="item in userList"
    :key="item.id"
    :label="item.userName +'---'+item.departName +'---'+item.departRole"
    :value="item.id"

  />
  </el-select>

        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime" disabled/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="edit">修改</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue"
import ImgsShow from "@/components/img/imgShow/index.vue"
import {
  getConFilesPage,
  updateConFiles,
  deletedConFiles,
  addConFiles,
  getConFilesById
} from "@/api/conFiles";
import {useRouter} from "vue-router";
const router = useRouter();
import {
  uploadOneFile,
} from "@/api/file";


import {useUserStore} from "@/stores/userStores";
import {
  getProjectPage,
  updateProject,
  getProjectList,
  deletedProject,
  addProject,
  getProjectById
} from "@/api/project";
import {
  getTree,
  getProUserList,
  doProUser,
  getProUserIds
} from "@/api/user";
const tableData = reactive({
  records: [],
  orderBy: '',
  pages: 0,
  page: 1,
  size: 10,
  query: {}
});
const userList = ref([]);
const projectList = ref([]);
const form = ref({
  id: '', //合同文件id
  projId: '', //项目id
  projName: '', //项目名
  title: '', //合同标题
  deptId: '', //上传部门id
  userId: '', //上传人

  createTime: '', //创建时间
});
//------------选择框------------------------
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },

];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);


// 文件相关
const fileInput = ref(null)

const file = ref(null)
const conId = ref(1);
const type = 1;
const selectFile = (id) => {
  conId.value = id;
    fileInput.value.click()     //点击按钮触发输入框选择文件

}

const handleFileChange = (e) => {    //当输入框选择文件后
    file.value = e.target.files[0]
    if (!file.value) return
    uploadFile(file)

}

const uploadFile = async (file) => {    //将输入框选择的文件和参数id一起添加进formData
    const formData = new FormData()
    formData.append('file', file.value) //file.value是上传的文件
    formData.append('noId', conId.value) //id是要携带的参数
    formData.append('type', type) //id是要携带的参数
    console.log("文件=>{}",formData)
    const res =await uploadOneFile(formData);
    if(res.code === 200){
      ElMessage.success("上传成功");
    loadData();
    }
}




// --------图片相关----------
const imgList = ref([])
const changeImgList = (array) => {
  imgList.value = array;
  form.value.pictures = JSON.stringify(array);
}

const dealImgJson = () => {
  // 图片处理
  // console.log("拿到的图片值", form.value.pictures)
  // if ('' != form.value.pictures && null != form.value.pictures) {
  //   imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
  // }
}

// ------------------- 搜索操作 ------------------------

const searchData = ref({

  //项目id
  projId: {
    key: 'proj_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目名
  projName: {
    key: 'proj_name',
    sqlKeyword: 'LIKE',
    value: ''
  },
  //合同标题
  title: {
    key: 'title',
    sqlKeyword: 'LIKE',
    value: ''
  },
  //上传部门id
  deptId: {
    key: 'dept_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //上传人

  userId: {
    key: 'user_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //创建时间
  createTime: {
    key: 'createTime',
    sqlKeyword: 'EQ',
    value: ''
  },

});

function clearnSearch() {

  searchData.value.projId.value = '';
  searchData.value.projName.value = '';
  searchData.value.title.value = '';
  searchData.value.deptId.value = '';
  searchData.value.userId.value = '';
  searchData.value.createTime.value = '';
  loadData();

}


/**
 * 查看详情
 * */
const openDetail = async (id) => {
  router.push("/admin/fileDetail/"+id);
}

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
  const res = await getConFilesById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
  const res = await updateConFiles(form.value);
  ElMessage.success("修改成功");
  editDialog.value = false;
  loadData();
  resetForm();
};

/**
 *添加
 */
const add = async () => {
  const res = await addConFiles(form.value);
  ElMessage.success("添加成功");
  addDialog.value = false;
  loadData();
  resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deletedConFiles({id});
    ElMessage.success("success");
    loadData();
  });
};

/**
 * 重置表单
 */
const resetForm = () => {
  if (addDialog.value) {
    addDialog.value = false;
  }
  if (editDialog.value) {
    editDialog.value = false;
  }
  if (detailDialog.value) {
    detailDialog.value = false;
  }
  form.value = {};
  // 图片处理
  imgList.value = [];
};

const loadData = async () => {
  const resd = await getTree();
  userList.value = resd.data;
  tableData.query = searchData.value;
  const res = await getConFilesPage(tableData);
  tableData.records = res.data.list;
  tableData.page = res.data.page;
  tableData.pages = res.data.pages;
};
const loadlProjectList = async () =>{
  const res = await getProjectList();
  projectList.value =res.data;
}
onMounted(() => {
  // 初始加载分页数据

  loadData(tableData);
  loadlProjectList();
});
</script>

<style scoped>

.search-line {
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  line-height: 35px;
}

</style>

